<!-- 保函品种申请页 -->
<template>
  <div class="apply page-nav">
    <div class="apply-header common-left-title">请选择开函品种</div>
    <el-scrollbar>
      <div class="apply-content">
        <div
          v-for="item in 7"
          :key="item"
          class="apply-content__item">
          <div class="apply-content__item--carton" @click="handleOpen">
            <div class="apply-content__item--logo">
              <img src="@/assets/images/logo-short.png" />
            </div>
            <div class="apply-content__item--name">平安银行股份有限公司武汉分行</div>
            <div class="apply-content__item--text">
              <div>产品简介：银行保函</div>
              <div>办理便捷：全线上流程</div>
              <div>出函快速：7*24小时自动审批最快当天开函</div>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
const router = useRouter()
function handleOpen(){
  router.replace({
    path: '/',
    state: {
      open: true,
    },
    // 重新触发导航
    force: true
  })
}
</script>

<style lang="scss" scoped>
.apply{
  overflow: hidden;
  box-sizing: border-box;
  --main-padding: 0 20px;
  &-header{
    --subtitle-font-size: 24px;
    --subtitle-line-right: 20px;
    margin: var(--main-padding);
    padding-left: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333333;
  }
  &-content{
    // display: flex;
    // flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 50px 40px;
    padding: 30px 0;
    margin: var(--main-padding);
    &__item{
      &--carton{
        width: 300px;
        height: 405px;
        margin: 0 auto;
        box-sizing: border-box;
        border-radius: 20px;
        padding: 0 20px 10px;
        cursor: pointer;
        box-shadow: 0 0 0 1px #797979; // 边框
        transition: box-shadow 0.3s ease-in-out; // 平滑过渡效果
        &:hover{
          box-shadow:
            0 0 0 2px #DEA271, // 边框
            0 4px 20px 1px rgba(0,0,0,0.35); // 阴影
        }
      }
      &--logo{
        height: 120px;
        text-align: center;
        img{
          width: auto;
          max-height: 100%;
        }
      }
      &--name{
        font-weight: 900;
        font-size: 24px;
        color: #333333;
        max-width: 240px;
        margin: 0 auto 20px;
        text-align: center;
      }
      &--text{
        font-size: 18px;
        line-height: 34px;
        color: #7F7F7F;
        margin: 0 25px;
      }
    }
  }
}
</style>
